<template>
  <view class="notice-bar-container" v-if="displayNoticeList && displayNoticeList.length > 0">
    <u-notice-bar
      mode="vertical"
      :is-circular="false"
      :list="displayNoticeList"
      :disable-touch="false"
      bg-color="#fff"
      padding="18rpx 24rpx 18rpx 220rpx"
      color="#666"
      :volume-icon="false"
      @click="handleNotice"></u-notice-bar>
    <view class="left-label">
      <u-icon name="volume-up-fill" color="#56d39d" size="48"></u-icon>
      <text class="label-name">创作小助手</text>
    </view>
  </view>
</template>

<script>
  import { questionListByBusinessId } from '@/api/applet';
  export default {
    data() {
      return {
        noticeList: [],
        displayNoticeList: []
      }
    },
    mounted() {
      this.getNoticeList();
    },
    methods: {
      // 获取公告
			getNoticeList() {
				questionListByBusinessId({
					type: '2'
				}).then(result => {
					if (result && result.data && result.data.length > 0) {
            let list = result.data;
            this.displayNoticeList = list.map(item => {
              return item.title
            })
            this.noticeList = list;
          }
				})
			},

      // 点击公告
      async handleNotice(val) {
        const notice = this.noticeList[val];
        uni.navigateTo({
          url: `/pages/customer/noticeDetail?id=${notice.id}`
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .notice-bar-container{
    padding: 12rpx;
    border-radius: 16rpx;
    border: 2rpx solid #eaeaea;
    color: #333;
    background-color: #fff;
    position: relative;

    .left-label{
      height: 48rpx;
      line-height: 48rpx;
      position: absolute;
      left: 24rpx;
      top: 0;
      bottom: 0;
      margin: auto;
      color: #56d39d;

      .label-name{
        position: relative;
        top: -8rpx;
        padding-left: 6rpx;
      }
    }
  }
</style>
